<!DOCTYPE html>
<html>
 <head> 
  <title>jQuery解决跨域问题--闫海的个人博客-芒果小叨</title> 
  <!-- meta tags start --> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta name="Keywords" content="个人博客,闫海个人博客,jQuery,jquery跨域,js跨域,跨域解决,怎样跨域" /> 
  <meta name="Description" content="应用jQuery处理跨域问题." /> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
  <!-- meta tags end -->
  <!-- favorite icon starts -->
  <link rel="shortcut icon" href="/Public/Index/mobile/images/common/favicon.ico" type="image/x-icon" />
  <!-- favorite icon ends -->
  <!-- CSS files start -->
  <link href="/Public/Index/mobile/css/framework.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/colorbox.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/responsive.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="/Public/Index/mobile/css/hidpi.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="/Public/Index/mobile/css/skin.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/custom.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/elements.css" rel="stylesheet" type="text/css" media="all" />
  <link href="/Public/Index/mobile/css/style.css" rel="stylesheet" type="text/css" media="all" />
  
  <!-- CSS files end -->
  <!-- JavaScript files start --> 
  <script type="text/javascript" src="/Public/Index/mobile/grayscale.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/jquery.min.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/effects.jquery-ui.min.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/jquery.nivo-slider.min.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/custom.js"></script>
  <script type="text/javascript" src="/Public/Index/mobile/js/jquery.colorbox.min.js"></script>
  
  <!-- JavaScript files end -->
 </head>
 <body>
  <!-- website wrapper starts -->
  <div class="websiteWrapper"> 
   <!-- main menu wrapper starts --> 
   <div class="mainMenuOuterWrapper"> 
    <a href="#" class="mainMenuCloseButton"></a> 
    <ul class="mainMenuWrapper"> 
     <li class="currentPage"><a href='/mobile.php/index.html' title='首页'>首页</a></li>
      <li><a href='/mobile.php/list/2.html' title='关于我'>关于我<span> </span></a></li><li><a href='/mobile.php/list/3.html' title='时光轴'>时光轴<span> </span></a></li><li><a href='/mobile.php/list/1.html' title='品味人生'>品味人生<span> </span></a></li><li><a href='/mobile.php/list/5.html' title='技术分享'>技术分享<span> </span></a></li>     <li><a href='/mobile.php/index/article/message.html'  title='给我留言'>给我留言</a></li>
    </ul> 
   </div> 
   <!-- main menu wrapper ends --> 

<script type="text/javascript">
  var url = '/mobile.php/article';
  $(function(){
    var id = '36';
    $.post(url+'/addClick',{'id':id},function(data){
        $("#pclick").html('点击数：' + data);
    });
  })
</script>
   <!-- header wrapper starts --> 
   <div class="headerOuterWrapper pageHeaderWrapper"> 
    <div class="headerWrapper"> 
     <a class="mainLogo" href="/mobile.php/index.html"><img src="/Public/Index/mobile/images/mainLogo.png" alt="" /></a> 
     <a href="#" class="mainMenuButton"></a>
    </div>
    <!-- page title starts --> 
    <h5 class="pageTitle">当前位置：
	<a href="/mobile.php/index.html">首页</a>&nbsp;&gt;&nbsp;
	<a href="/mobile.php/list/5.html">技术分享</a>
	&nbsp;&gt;&nbsp;<a href="/mobile.php/list/12.html">javascript</a>
	</h5>    <!-- page title ends --> 
   </div>
   <!-- header wrapper ends --> 
   <!-- page wrapper starts --> 
   <div class="pageWrapper singlePostPageWrapper"> 
    <!-- post content wrapper starts --> 
    <div class="singlePostContentWrapper">
    <h3 class="pageTitle" style="background:#F0F0F0;color:#333;text-align:center;">jQuery解决跨域问题</h3> 
     <div class="pageSpacer"></div> 
     <div class="pageSpacer"></div> 
     <div style="word-break: break-all;" class="phoneContent"><p>&nbsp;&nbsp;&nbsp; 首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：&nbsp; &nbsp; &nbsp; &nbsp;	
 &nbsp; &nbsp; &nbsp;&nbsp; <br/></p><table border="1"><tbody><tr class="firstRow"><th>URL</th><th>说明</th><th>是否允许通信</th></tr><tr><td>http://www.a.com/a.js<br/>http://www.a.com/b.js</td><td>同一域名下</td><td>允许</td></tr><tr><td>http://www.a.com/lab/a.js<br/>http://www.a.com/script/b.js</td><td>同一域名下不同文件夹</td><td>允许</td></tr><tr><td>http://www.a.com:8000/a.js<br/>http://www.a.com/b.js</td><td>同一域名，不同端口</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>https://www.a.com/b.js</td><td>同一域名，不同协议</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>http://70.32.92.74/b.js</td><td>域名和域名对应ip</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>http://script.a.com/b.js</td><td>主域相同，子域不同</td><td>不允许</td></tr><tr><td>http://www.a.com/a.js<br/>http://a.com/b.js</td><td>同一域名，不同二级域名（同上）</td><td>不允许（cookie这种情况下也不允许访问）</td></tr><tr><td>http://www.cnblogs.com/a.js<br/>http://www.a.com/b.js</td><td>不同域名</td><td>不允许</td></tr></tbody></table><p>&nbsp;&nbsp;&nbsp; JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。</p><p>应用jQuery处理跨域问题:</p><pre class="brush:js;toolbar:false">&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
//jQuery跨域请求
$(document).ready(function(){
&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#btn&#39;).one(&#39;click&#39;,function(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//方法1：
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;get&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;jsonP&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;请求地址&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jsonp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;fn&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(msg){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//.....
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//方法2:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.get(&#39;请求地址?fn=?&#39;,function(msg){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//.....
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&#39;jsonp&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//方法3:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.getJSON(&#39;请求地址?ddd=?&#39;,{a:[{name:&#39;yanhai&#39;,age:26},{name:&#39;yanhai1&#39;,age:16},{name:&#39;yanhai2&#39;,age:22}]},function(msg){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;a=0;a&lt;msg.length;a++){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#d&quot;).append(&#39;&lt;p&gt;&lt;/p&gt;&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.each(msg,function(i){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;p:eq(&quot;+i+&quot;)&quot;).html(msg[i].name+&quot;:&quot;+msg[i].age);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;&nbsp;&nbsp;});
});
&lt;/script&gt;</pre><p>请求页面处理：</p><pre class="brush:php;toolbar:false">&lt;?php
$data&nbsp;=&nbsp;$_GET[a];
$cb&nbsp;=&nbsp;$_GET[&#39;ddd&#39;];
echo&nbsp;$cb.&#39;(&#39;.json_encode($data).&#39;)&#39;;</pre><p>触发click事件后会返回：</p><p>yanhai:26</p><p>yanhai1:16</p><p>yanhai2:22</p></div>
     <div class="textBreak"></div> 
    </div> 
    <!-- post content wrapper ends --> 
    <!-- post info starts --> 
    <div class="singlePostInfoWrapper">
     <span class="singleIconWrapper singleIconText iconCalendarDark postInfo postDate">2015-03-06</span>
     <a class="singleIconWrapper singleIconText iconEditDark postInfo postAuthor postInfoNoMargin">小叨</a>&nbsp;&nbsp;
     <span class="singleIconWrapper singleIconText iconArrowRightDark" id="pclick">点击数：156</span>
    </div> 
    <!-- post info ends --> 
    <!-- post links wrapper starts --> 
    <div class="singlePostContentWrapper"> 
     <p>上一篇：<a href="/mobile.php/article/31.html">关于网站限制ie10以下浏览器访问的探讨</a></p>
     <p>下一篇：已经是最后一篇文章了</p>
    </div> 
    <!-- post links wrapper ends --> 
    <!-- comments section wrapper starts --> 
    <div class="commentsSectionWrapper"> 
     <h4 class="commentsTitle">相关阅读：</h4> 
     <!-- comments wrapper starts --> 
     <!-- accordion item wrapper starts --> 
        <div class="accordionContent"> 
         <p><a href="/mobile.php/article/36.html" title="jQuery解决跨域问题">jQuery解决跨域问题</a></p><p><a href="/mobile.php/article/31.html" title="关于网站限制ie10以下浏览器访问的探讨">关于网站限制ie10以下浏览器访问的探讨</a></p><p><a href="/mobile.php/article/24.html" title="jquery拖拽效果原理">jquery拖拽效果原理</a></p><p><a href="/mobile.php/article/22.html" title="JS实现窗口垂直水平居中">JS实现窗口垂直水平居中</a></p><p><a href="/mobile.php/article/21.html" title="首页焦点图轮播代码示例">首页焦点图轮播代码示例</a></p><p><a href="/mobile.php/article/20.html" title="JS写一个浮动广告">JS写一个浮动广告</a></p>        </div> 
     <!-- accordion item wrapper ends -->
     <!-- coments wrapper ends --> 
    </div> 
    <!-- comments section wrapper ends --> 
   </div> 
   <!-- page wrapper ends --> 
   <!-- footer wrapper starts --> 
   <div class="footerWrapper"> 
    <!-- copyright wrapper starts --> 
    <div class="copyrightWrapper"> 
     <!-- copyright starts --> 
     <span class="copyright"><a href="http://www.miitbeian.gov.cn/">鲁ICP备15004472号-1</a></span> 
     <!-- copyright ends --> 
     <!-- back to top button starts --> 
     <a href="" class="backToTopButton"></a> 
     <!-- back to top button ends --> 
    </div> 
    <!-- copyright wrapper ends --> 
   </div> 
   <!-- footer wrapper ends --> 
  </div>
  <!-- website wrapper ends -->
 </body>
</html>